<template>
    <div class="word">
        <div class="word-head">
            <div class="w-h-fixed">
                <div class="h-all">
                    <router-link :to="{path:'/level',query:{id:bookId}}"><img src="../assets/img/back.png" alt=""></router-link> 总共{{allWords.length}}个单词</div>
            </div>
        </div>
        <div class="item" :class="{part:(i%7===0&&i>6)}" v-for="(item,i) in words">
            <div class="word-div" :class="{one:item.clickNum===1}" v-if="item.clickNum!==2" @touchstart="speakWord(item,'menAudio'+i)" :key="'a'+i">
                <span>{{item.en}}</span>
            </div>
            <div class="word-div active" v-else @touchstart="speakWord(item,'menAudio'+i)" :key="'b'+i">
                <span>{{item.en}}</span>
                <span class="sound">{{item.cn}}</span>
                <div class="type">{{item.voice}}</div>
            </div>
            <div class="off rotate" data-event="11205" style="display: block;">
                <audio preload="auto"  :id="'menAudio'+i" :src="item.url||io.getAudio + '?word=' + item.en + '&per=5&accessToken=' + accessToken"></audio>
            </div>
        </div>
        <div class="btn-div">
            <div v-if="aIndex>1" @click="prevPage">上一页</div>
            <div v-if="hasNext" @click="nextPage">下一页</div>
            <div v-if="ext&&ext.nextId&&!hasNext" class="next-part" @click="next">下一关</div>
        </div>
    </div>
</template>
<script>
import io from 'api/io'
import storage from 'storage'
import util from 'util'
import wxConfig from 'api/wx'
export default {
    name: 'word',
    data() {
        return {
            id: this.$route.query.id,
            bookId: this.$route.query.bookId,
            words: [],
            allWords:[],
            ext: {},
            accessToken: storage.getAccessToken(),
            io: io,
            list: [],
            startY: 0,
            isMoveUp: false,
            aIndex: 1,
            hasNext: false
        }
    },
    created() {
        this.findWordPage()
        wxConfig()
    },
    mounted() {
        this.init()
    },
    beforeRouteUpdate(to, from, next) {
        this.id = to.query.id
        this.bookId = to.query.bookId
        this.findWordPage()
        this.init()
        next()
    },
    methods: {
        nextPage() {
            if (this.aIndex < Math.ceil(this.allWords.length / 7)) {
                this.aIndex++
                this.words = this.allWords.slice((this.aIndex - 1) * 7, this.aIndex * 7)
                this.hasNext = this.allWords.length > this.aIndex * 7
            }
        },
        prevPage() {
            if (this.aIndex > 1) {
                this.aIndex--
                this.words = this.allWords.slice((this.aIndex - 1) * 7, this.aIndex * 7)
                this.hasNext = this.allWords.length > this.aIndex * 7
            }
        },
        async next() {
            let { data } = await io.post(io.passUnit, { wordRepoId: this.bookId, wordUnitId: this.ext.nextId })
            if (data.success) {
                this.$router.push({ path: '/word', query: { id: this.ext.nextId, title: this.ext.nextName, bookId: this.bookId } })
            }
        },
        init() {
            if(wx){
            wx.ready(() => {
                let audios = document.getElementsByTagName('audio')
                let audioLength = audios.length
                for (let i = 0; i < audioLength; i++) {
                    audios[i].load()
                    audios[i].play()
                    audios[i].pause()
                }
            })
            }
        },
        async findWordPage() {
            let { data } = await io.post(io.findWordPage, { wordUnitId: this.id, pageIndex: 1, pageSize: 1000000 })
            if (data.success) {
                data.data.list.map((item, i) => {
                    item.clickNum = 0
                    item.en = item.en.trim()
                })
                this.ext = { ...data.data.ext }
                this.allWords = [...data.data.list]
                this.words = data.data.list.slice(0, 7)
                this.hasNext = this.allWords.length > 7
                this.aIndex = 1
            }
        },
        speakWord(item, id) {
            if (item.clickNum === 0) {
                this.words.map((item, i) => {
                    item.clickNum = 0
                })
            }
            item.clickNum++
            this.play(document.getElementById(id))
            if (item.clickNum === 3) {
                item.clickNum = 1
            }
        },
        play(voice) {
            //调用 <audio> 元素提供的方法 play()
            voice.addEventListener('ended', () => {
                voice.load()
            })
            let isWx=util.isWeiXin()
            if(isWx){
            //判断 WeixinJSBridge 是否存在
            if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
                voice.play();
            } else {
                //监听客户端抛出事件"WeixinJSBridgeReady"
                if (document.addEventListener) {
                    document.addEventListener("WeixinJSBridgeReady", function() {
                        voice.play();
                    }, false);
                } else if (document.attachEvent) {
                    document.attachEvent("WeixinJSBridgeReady", function() {
                        voice.play();
                    });
                    document.attachEvent("onWeixinJSBridgeReady", function() {
                        voice.play();
                    });
                }
            }
            if (!util.isIOS()) {
                return
            }
            //voiceStatu用来记录状态,使 touchstart 事件只能触发一次有效,避免與 click 事件衝突
            let voiceStatu = true;
            // 监听 touchstart 事件进而调用 <audio> 元素提供的 play() 方法播放音频
            document.addEventListener("touchend", function(e) {
                if (voiceStatu) {
                    voice.play();
                    voiceStatu = false;
                }
            }, false);
            }else{
                voice.load()
                voice.play()
            }

        }
    }
}
</script>
<style lang="stylus" scoped>
.word
    font-size 18px
    color #333
    background #f5f5f5
    min-height 100%
    .w-h-fixed
        background #D4FFD0
        font-weight bold
        position fixed
        top 0
        height 48px
        width 100%
        z-index 1
        display flex
        align-items center
        padding-left 15px
        box-sizing border-box
        color #666
        .h-all 
            flex 1
            display flex
            align-items center
            a
                display inline-flex
            img
                height 15px
                width 13px
                padding 10px 10px 10px 0
        .h-next
            width auto
            margin-right 10px
            height 100%
            display flex
            align-items center
            color #3EA69E
            font-size 15px
            font-weight normal
            &:hover
                color #333
    .word-head
        height 48px
    .item
        position relative
        height 60px
        &.part
            margin-top 50px
    .word-div
        height 60px
        border-bottom 1px solid #eeeeee
        padding-left 25px
        padding-top 6px
        box-sizing border-box
        line-height 23px
        position absolute
        top 0
        width 100%
        background white
        img
            position absolute
            top 20px
            right 20px
            height 21px
            width 24px
        &.one
            font-weight bold
        &.active
            font-weight bold
        span 
            height 20px
            display inline-block
        .sound
            float right 
            margin-right 20px
            margin-top 12px
            display inline-block
            max-width 150px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
        .type
            font-size 16px
.btn-div
    display flex
    justify-content center
    div
      width 40%
      margin 30px 5%
      height 42px
      background-image linear-gradient(180deg, #99f164 0%, #77de6b 37%, #54cb72 74%,  #4eb667 100%)
      border-radius 20px
      display flex
      justify-content center
      align-items center
      color #fefefe
      font-size 18px
    .next-part
        background-image linear-gradient(180deg, #00e298 0%, #00deb5 37%, #00c1c6 74%, #00a2c2 100%)

@media screen and (min-width: 500px)and (max-width: 600px) 
     .item
        height 80px !important
        .word-div
            height 80px !important
            font-size 24px !important
            padding-top 10px !important
            span 
                height 28px !important
                line-height 28px !important
            .sound
                margin-top 16px !important
            .type
                font-size 20px !important
                margin-top 8px !important
        .type
            font-size 20px !important
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
    .word
        font-size 30px !important
        .word-head
            height 64px !important
            .w-h-fixed
                height 64px !important
                img 
                    height 30px !important
                    width 26px !important
    .word-div
        line-height 30px !important
        .sound
            margin-top 20px !important
            max-width 300px !important
        .type
            font-size 30px !important
        span 
            height 40px !important
            line-height 40px !important
    .item,.word-div
        height 88px !important
</style>
<style scoped>
/*.fade-enter-active {
    animation: fade-in .2s;
}

.fade-leave-active {
    animation: fade-in .2s;
}

@keyframes fade-in {
    0% {
        transform: rotateX(0deg);
        transform-origin: center;
        opacity: 1;
    }
    100% {
        transform: rotateX(180deg);
        transform-origin: center;
        opacity: 0;
    }
}*/
</style>


